<template>
  <div class="password-strength display-flex">
    <div class="strength-item display-flex" v-for="item in 5" :key="item">
      <span
        :style="{
          width: strength >= item ? '100%' : '0',
          backgroundColor: color
        }"
      ></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  lowercaseRegex,
  numberRegex,
  specialCharRegex,
  uppercaseRegex
} from '@/utils/modules/regexp'
import { computed } from 'vue'

const props = withDefaults(defineProps<{ password: string }>(), {
  password: ''
})

const strengthList = [
  '',
  '#e74242',
  '#ED6F6F',
  '#EFBD47',
  '#55D18780',
  '#55D187'
]

const strength = computed(() => {
  return checkPasswordStrength(props.password)
})

const color = computed(() => {
  return strengthList[strength.value]
})

const checkPasswordStrength = (password: string) => {
  let strength = 0
  if (password.length >= 8) strength++
  if (lowercaseRegex.test(password)) strength++
  if (uppercaseRegex.test(password)) strength++
  if (numberRegex.test(password)) strength++
  if (specialCharRegex.test(password)) strength++
  return strength
}

defineOptions({
  name: 'CorePasswordStrength'
})
</script>

<style scoped lang="scss">
.password-strength {
  gap: 6px;
  height: 6px;
  margin-top: 8px;

  .strength-item {
    flex: 1;
    height: 100%;
    background-color: var(--core-bg-color-06);
    border-radius: 3px;

    span {
      width: 0;
      border-radius: inherit;
      transition: all 0.5s;
    }
  }
}
</style>
